<template>
	<view style="background-color: #F7F7F6; padding-bottom: 50rpx;">
		<!-- 搜索部分 -->
		<view class="container">
			<!-- 小程序头部兼容 -->
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
				@input="input" @cancel="cancel" @clear="clear" class="search" cancelButton="none">
			</uni-search-bar>
			<view class="area">
				重庆
				<uni-icons type="bottom" size="15"></uni-icons>
			</view>

		</view>
		<view class="selected">
			<u-dropdown ref="uDropdown">
				<u-dropdown-item :title="item.title" v-for="(item,index) in selectData" :key="item.id">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="height: 200rpx;">
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20" v-for="val in item.options"
								:key="val.id">{{val.title}}</view>
						</scroll-view>
					</view>
				</u-dropdown-item>

			</u-dropdown>
		</view>

		<!-- 分类列表 -->
		<view class="recommend">
			<view class="tj-box" v-for="item in recommend">
				<view class="tj-img" :style="{backgroundImage:`url(${item.imageUrl})`}">
				</view>
				<view class="tj-txt">
					<view class="title">
						{{item.title}}
					</view>
					<view class="tj-wz">
						<view style="color: #A0A0A0;">
							<uni-icons color='#F6637C' type="location-filled" size="20"></uni-icons>
							沙坪坝步行街
						</view>
						<view class="" style="color: #FE2121;">
							250m
						</view>
					</view>
					<view class="tj-zl">
						<view class="">
							烧烤烤肉
						</view>
						<view class="tj-wm">
							支持外卖
						</view>
					</view>
					<view class="quan">
						<view class="icon">
							券
						</view>
						<view class="txt">
							38元抵100元代金券
						</view>
					</view>
					<view class="quan">
						<view class="icon" style="background: #EFFAF6;color: #5CC9A5;">
							团
						</view>
						<view class="txt">
							4元套餐48.8元；6人套餐228元短标；4人 餐188元（原价264元）短标；8人餐短标。
						</view>
					</view>
					<view class="quan">
						<view class="icon" style="background: #FDF2EC;color: #ED7944;">
							拼
						</view>
						<view class="txt">
							青椒肉丝炒饭10元短标
						</view>
					</view>
					<view class="quan">
						<view class="icon" style="background: #F0FAEB;color: #6DC83B;">
							免
						</view>
						<view class="txt">
							冰柠檬水免费赠饮一杯，回锅肉炒饭一份 短标。
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" iconType="circle"></uni-load-more>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {

				recommend: [{
						title: '阿里与艾德炭烤麻里牛排海鲜 ...',
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e60ff74276e14057bf05a815d2e5568c_mergeImage.png'

					},
					{
						title: '阿里与艾德炭烤麻里牛排海鲜 ...',
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e60ff74276e14057bf05a815d2e5568c_mergeImage.png'

					},
					{
						title: '阿里与艾德炭烤麻里牛排海鲜 ...',
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e60ff74276e14057bf05a815d2e5568c_mergeImage.png'

					}, {
						title: '阿里与艾德炭烤麻里牛排海鲜 ...',
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e60ff74276e14057bf05a815d2e5568c_mergeImage.png'

					}
				],
				selectData: [{
						id: '01',
						title: '选择分类',
						options: [{
								id: '001',
								title: '热门饮品'
							},
							{
								id: '002',
								title: '火锅汤锅'
							},
							{
								id: '003',
								title: '煎炸小吃'
							},
							{
								id: '004',
								title: '网红探店'
							},
						]
					},
					{
						id: '02',
						title: '附近',
						options: [{
								id: '001',
								title: '100m'
							},
							{
								id: '002',
								title: '500m'
							},
							{
								id: '003',
								title: '1km'
							},
							{
								id: '004',
								title: '5km'
							},
						]
					},
					{
						id: '03',
						title: '热门',
						options: [{
								id: '001',
								title: '热门饮品'
							},
							{
								id: '002',
								title: '热门小吃'
							},
							{
								id: '003',
								title: '热门商城'
							}
						]
					},
				],
				status: 'more'
			};
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				// uni.showToast({
				// 	title: 'clear事件，清除值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			blur(res) {
				// uni.showToast({
				// 	title: 'blur事件，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			focus(e) {
				// uni.showToast({
				// 	title: 'focus事件，输出值为：' + e.value,
				// 	icon: 'none'
				// })
			},
			cancel(res) {
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			},

			closeDropdown() {
				this.$refs.uDropdown.close();
			},


			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change() {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
			},
			//加载状态
			onChange(value) {
				this.status =value
			},
		},
		onReachBottom() {
					this.onChange('loading')
					//模拟异步请求数据
					setTimeout(() => {
						this.recommend = [...this.recommend,...this.recommend]
						this.onChange(('noMore')); //模拟加载完成的状态
					},1000)
					
				}
	}
</script>

<style lang="scss">
	// 搜索
	.container {
		width: 100%;
		position: fixed;
		top: 0;
		display: flex;
		padding: 10px 0;
		background: #fff;
		gap: 80rpx;

		.search {
			flex: 1;
		}

		.uni-searchbar {
			width: 100% !important;
		}

		.area {
			padding-right: 20px;
			// width: 33px;
			height: 22px;
			font-size: 15px;
			font-family: Humnst777 BT-Roman, Humnst777 BT;
			font-weight: 600;
			color: #242424;
			line-height: 33px;

			.uni-icons {
				padding-left: 5px;
				color: 000;
			}
		}

		/deep/ .uni-searchbar {
			width: 70%;
			height: 30px;
			padding: 0 10px;

			.uni-searchbar__box {
				height: 30px;
				justify-content: left;
			}
		}
	}

	//下拉框
	.selected {
		margin-top: 100rpx;
		background-color: #fff;
	}

	//列表
	.recommend {
		padding: 0 15px;
		padding-top: 15px;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: end;
		}

		.tj-box {
			display: flex;
			justify-content: space-between;
			padding: 10px;
			border-bottom: 0.5px solid #F6F6F6;
			border-radius: 20rpx;
			box-sizing: border-box;
			background-color: #fff;

			.tj-img {
				width: 184rpx;
				height: 184rpx;
				border-radius: 12px;
				background: no-repeat;
			}

			.title {
				font-weight: 600;
			}

			.tj-txt {
				width: 220px;

				.tj-wz {
					display: flex;
					justify-content: space-between;
					padding-top: 10px;
				}

				.tj-zl {
					display: flex;
					font-size: 11px;
					font-family: Roboto-Regular, Roboto;
					font-weight: 400;
					color: #999999;
					padding-top: 10px;

					.tj-wm {
						padding-left: 20px;
						color: #FFD150;
					}
				}

				.quan {
					display: flex;
					padding-top: 10px;
					align-items: baseline;

					.icon {
						margin-right: 10px;
						background: #FFE9E9;
						width: 22px !important;
						height: 22px;
						font-size: 12px;
						font-family: Roboto-Regular, Roboto;
						font-weight: 400;
						color: #FE2121;
						text-align: center;
						line-height: 23px;
						border-radius: 5px 5px 5px 5px;
					}

					.txt {
						font-size: 11px;
						font-family: Roboto-Regular, Roboto;
						font-weight: 400;
						color: #242424;
						width: calc(100% - 22px);
					}
				}
			}
		}
	}
</style>